<template>
  <el-menu
    default-active="2"
    background-color="transparent"
    text-color="#fff"
    active-text-color="#43a7fe"
    :collapse="!expanding"
    :collapse-transition="false"
    :router="true"
  >

    <template v-for="(item, idx) in NAV_CONFIG">

      <el-submenu
        v-if="!!item.children"
        :key="item.title"
        :index="idx.toString()"
      >

        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{ item.title }}</span>
        </template>

        <el-menu-item
          v-for="(subItem) in item.children"
          :key="subItem.title"
          :index="subItem.path"
        >
          <i :class="subItem.icon"></i>
          <span slot="title">{{ subItem.title }}</span>
        </el-menu-item>

      </el-submenu>

      <el-menu-item
        v-else
        :key="item.title"
        :index="item.path"
      >
        <i :class="item.icon"></i>
        <span slot="title">{{ item.title }}</span>
      </el-menu-item>

    </template>


  </el-menu>
</template>

<script>
import { NAV_CONFIG } from '../../constants/conf';
export default {
  props: ['expanding'],
  data () {
    return {
      NAV_CONFIG,
    };
  },
}
</script>
